<template>
    <div>
        <el-table
    :data="form"
    style="width: 90%;margin: 0 auto;">
    <el-table-column
      label="头像">
      <template slot-scope="scope">
          <img style="max-height: 60px;" :src="scope.row.avatar">
        </template>
    </el-table-column>
    <el-table-column
      label="用户名"
      prop="name">
    </el-table-column>
    <el-table-column
      label="手机号"
      prop="phone">
    </el-table-column>
    <el-table-column align="right">
      <template slot="header" slot-scope="scope">
        <el-input v-model="search"  size="mini"  placeholder="输入关键字搜索" style="width:66%"/>
        <el-button size="mini" type="primary" @click="find()">搜索</el-button>
      </template>
      
    </el-table-column>
  </el-table>
    </div>
</template>

<script>
import httpApi from '@/http';

export default {
    data() {
      return {
        form:[{
          avatar:'',
          name: '',
          phone:''
        }],
        search: ''
      }
    },
    methods: {
      
      find(){
        console.log(this.search)
            httpApi.adminApi.findname({name:this.search}).then(res=>{
                    this.form=res.data.data
                    console.log(res)
            })
      }
    },
    mounted(){
      // 获取花卉百科类别
      httpApi.adminApi.findall().then(res=>{
        
        this.form=res.data.data
      })
      
    }
  }
</script>

<style lang="scss" scoped>

</style>